import { reactive, computed } from "vue";
import { nanoid } from "nanoid";
import store from "@/store/index.js";

import {
  titleHeightratio,
  subtitleHeightratio,
  xLocation,
  getNowTime,
  sizeData,
} from "./index.js";
import { BGM_CONFIG_VOLUM } from "../../../../common/constants/shotstack.js";
// 字体列表
const fontList = computed(() => {
  return store.state.shotstack.fontList;
});

// 默认花字列表
const FlowerDefaultArr = computed(() => {
  return store.state.shotstack.FlowerDefaultArr;
});

// 花字列表
const FlowerArr = computed(() => {
  return store.state.shotstack.FlowerArr;
});

//
// 随机的花字
const defaultFlower = (type) => {
  return FlowerDefaultArr.value[type];
};

// 默认的音色
const defaultVoiceData = computed(() => {
  return store.state.shotstack.defaultVoiceData;
});

// 获取一个全局标题中的数据
export const baseText_config = () => {
  const find = fontList.value.find((item) => item.id_default == 1);
  const findFlowerFont_title = defaultFlower("title");
  return {
    text: "",
    flower_id: "",
    font_name: find.name,
    font_path: find.material_path,
    material_path: "",
    font_style: find.font_style,
    font_family: find.font_family,
    font_url: find.material_url,
    color: findFlowerFont_title.fontcolor || "#ffffff",
    bg_color: "",
    font_size: 24,
    bold: 1,
    italic: 0,
    id: nanoid(),
    x: sizeData.value.draggableWidth / xLocation,
    showX: sizeData.value.draggableWidth / xLocation,
    y: sizeData.value.draggableHeight / titleHeightratio,
    start_time: 0, //标题开始播放时间（单位：毫秒，音频转字幕时使用）
    alignment: "left",
    underline: 0,
    text_duration: null, //标题持续时长（单位：毫秒）
    preset_styles_config: {
      box: 0,
      type: 1,
      fontcolor: findFlowerFont_title.fontcolor || "",
      bordercolor: findFlowerFont_title.bordercolor || "",
      id: findFlowerFont_title.id || "",
      borderw: findFlowerFont_title.borderw || "",
      boxcolor: findFlowerFont_title.boxcolor || "",
      box_color_alpha: findFlowerFont_title.box_color_alpha || "",
      boxborderw: findFlowerFont_title.boxborderw || "",
      // boxradius: findFlowerFont_title.boxradius || "",
    },
    flower_config: {
      type: 0,
      color_main: "",
      color_sub: "",
    },
  };
};

// 获取一个新的 subtitle 配置
export const baseSubtitle = () => {
  const find = fontList.value.find((item) => item.id_default == 1);
  const findFlowerFont_text = FlowerArr.value.find(
    (item) => item.name == "白心黑边"
  );
  return {
    text: "",
    ssml: "<speak></speak>",
    font_name: find.name,
    font_path: find.material_path,
    material_path: "",
    font_style: find.font_style,
    font_family: find.font_family,
    font_url: find.material_url,
    audio_url: "",
    duration: "",
    font_size: 12,
    flower_id: "",
    bg_color: "",
    color: findFlowerFont_text.fontcolor || "#ffffff",
    bold: 0,
    italic: 0,
    x: sizeData.value.draggableWidth / xLocation,
    y: sizeData.value.draggableHeight / subtitleHeightratio,
    showX: sizeData.value.draggableWidth / xLocation,
    start_time: 0,
    end_time: 0,
    alignment: "left",
    underline: 0,
    subtitle_id: nanoid(),
    preset_styles_config: {
      box: 0,
      type: 1,
      fontcolor: findFlowerFont_text.fontcolor || "",
      bordercolor: findFlowerFont_text.bordercolor || "",
      id: findFlowerFont_text.id || "",
      borderw: findFlowerFont_text.borderw || "",
      boxcolor: findFlowerFont_text.boxcolor || "",
      box_color_alpha: findFlowerFont_text.box_color_alpha || "",
      boxborderw: findFlowerFont_text.boxborderw || "",
      // boxradius: findFlowerFont_title.boxradius || "",
    },
    flower_config: {
      type: 0,
      color_main: "",
      color_sub: "",
    },
    elements: [
      {
        type: "text", // type,text-文字，mute-静音,pause-停顿,phoneme-修改发音，number-数字读音
        text: "",
      },
    ],
  };
};

// 获取一个新的 tts配置
export const baseTts_config = () => {
  return {
    tab_id: "text", //配置类型：text-手动设置字幕，audio-音频生成字幕
    tts_id: nanoid(), // tts数组id
    audio_url: "", //音频地址
    img: defaultVoiceData.value.img || "",
    name: defaultVoiceData.value.name || "",
    emotion_category: "neutral", // 预期情感类型
    emotion_intensity: 100, // 情感程度
    // 字幕格式(多组)
    iccts: [
      {
        elements: [
          {
            type: "text", // type,text-文字，mute-静音,pause-停顿,phoneme-修改发音，number-数字读音
            text: "",
          },
        ],
        start_time: 0, // 字幕开始播放时间（单位：毫秒，音频转字幕时使用）
        end_time: 0, // 字幕播放结束时间（单位：毫秒，音频转字幕时使用）
      },
    ],
    showVoice: true, // 配音设置，true-开，false-关
    showSubtitle: true, // 字幕设置
    tone_id: defaultVoiceData.value.voice_id || "", // 音色id
    speed: 1.2, // 语速
    volume: 10, // 音量
    duration: "",
    start_time: 0,
    end_time: 0,
    subtitle: [
      {
        ...baseSubtitle(),
      },
    ],
  };
};

// 获取视频组中的单个文本标题配置
export const baseTemplateText_config = () => {

  const find = fontList.value.find((item) => item.id_default == 1);
  const findFlowerFont_title = defaultFlower("tts");
  return {
    text: "",
    flower_id: "",
    font_name: find?.name,
    font_path: find.material_path,
    material_path: "",
    font_style: find.font_style,
    font_family: find.font_family,
    font_url: find.material_url,
    color: findFlowerFont_title.fontcolor || "#ffffff",
    bg_color: "",
    font_size: 24,
    bold: 1,
    italic: 0,
    x: sizeData.value.draggableWidth / xLocation,
    showX: sizeData.value.draggableWidth / xLocation,
    y: sizeData.value.draggableHeight / titleHeightratio,
    start_time: 0, //标题开始播放时间（单位：毫秒，音频转字幕时使用）
    alignment: "left",
    underline: 0,
    id: nanoid(),
    text_duration: null, //标题持续时长（单位：毫秒）
    preset_styles_config: {
      box: 0,
      type: 1,
      fontcolor: findFlowerFont_title.fontcolor || "",
      bordercolor: findFlowerFont_title.bordercolor || "",
      id: findFlowerFont_title.id || "",
      borderw: findFlowerFont_title.borderw || "",
      boxcolor: findFlowerFont_title.boxcolor || "",
      box_color_alpha: findFlowerFont_title.box_color_alpha || "",
      boxborderw: findFlowerFont_title.boxborderw || "",
      // boxradius: findFlowerFont_title.boxradius || "",
    },
    flower_config: {
      type: 0,
      color_main: "",
      color_sub: "",
    },
  };
};

// 获取一个全局字幕配音数据
export const baseGlobal_tts_config = () => {
  return {
    tab_id: "text", //默认是字幕
    img: defaultVoiceData.value.img || "",
    name: defaultVoiceData.value.name || "",
    tone_id: defaultVoiceData.value.voice_id || "", // 音色id
    tts_id: nanoid(),
    iccts: [
      {
        elements: [
          {
            type: "text", // type,text-文字，mute-静音,pause-停顿,phoneme-修改发音，number-数字读音
            text: "",
          },
        ],
        start_time: 0,
        end_time: 0,
      },
    ],
    original_audio_url: "",
    audio_start: "",
    audio_end: "",
    audio_url: "",
    audio_name: "",
    showVoice: true,
    showSubtitle: true,
    emotion_category: "",
    emotion_intensity: "",
    speed: 1.2,
    volume: 10,
    duration: "",
    start_time: 0,
    subtitle: [
      {
        ...baseSubtitle(),
      },
    ],
  };
};

// 单项视频组数据
export const base_data = () => {
  return {
    type: 2, // 混剪模式 （0-单镜头混剪【当前镜头组，只挑选一个素材参与视频组合】，2-智能混剪 【当前镜头组的素材将切片后，随机参与视频组合】）
    name: "黄金三秒", // 场景镜头名称
    volume: false, // 素材音量
    // 文本标题配置
    text_config: [
      {
        ...baseTemplateText_config(),
      },
    ],
    tab_id: "text",
    // 字幕和口播配置(多组)
    tts_config: [
      {
        ...baseTts_config(),
      },
      {
        ...baseTts_config(),
        tab_id: "audio",
      },
    ],
    id: nanoid(),
    time_strategy: {
      // 时长设置=>决定镜头组以哪个元素的时长为准
      type: 0, // 时长类型设置：（0-视频原始时长，1-随音频，视频自动变速 ，2-随音频，视频智能截取 ，3-固定时长，智能去重）
      fixed_time: 3000, //类型为 3-固定时长，智能去重 时有效
    },
    // 素材列表
    material_list: [],
  };
};

// 新建的空混剪项数据
export const base_VideoMashup = () => {
  console.log(sizeData.value, "sizeData.value");
  return reactive({
    id: 0,
    width: 1080,
    height: 1920,
    // 用于展示的缩放比例版本分辨率
    showWidth: 1080 / 4,
    showHeight: 1920 / 4,
    // name: `模板项目${getNowTime()}`, // 项目标题
    name: `模板项目${getNowTime()}`, // 项目标题
    proportion: 0, // 比例类型（0-9:16，1-16:9,2-1:1，3-自定义）
    type: null, // 项目类型（0-剪辑项目，1-模板）
    unique_id: nanoid(), // 项目唯一标识
    tag_id: {}, // array[string]模板绑定标签id
    template_public: 0,
    video_key: "",
    // 镜头内容与配置--即场景内容数组
    resource_data: [
      {
        ...base_data(),
        name: "黄金三秒",
      },
      {
        ...base_data(),
        name: "优势呈现",
      },
      {
        ...base_data(),
        name: "结尾行动号召",
      },
    ],

    // 封面设置
    cover_config: {
      type: 1, // 0-不使用，1-智能生成，2-自定义图片
      material_urls: [],
    },

    // 背景设置
    background: {
      type: 1,
      material_urls: [],
      rgba: "#000000",
    },

    bgm_config: {
      type: 1,
      volume: BGM_CONFIG_VOLUM,
      copyright_range: [],
      bgm_list: [],
    },
    // 转场配置
    transition_config: {
      duration: 300,
      type: 0,
      transitions: [],
      global: 0,
    },
    // 滤镜设置
    filter_config: {
      type: 0, // （2-自定义，1-智能匹配，0-未设置）
      filters: [], // 滤镜数组
      global: 0, // global
    },
    // 全局字幕配音
    global_tts_config: {
      type: 0, // 1-使用全局字幕配音，0-不使用全局字幕配音
      isRandom: true, // 是否开启随机声音
      configs: [
        {
          ...baseGlobal_tts_config(),
          tab_id: "audio",
        },
        {
          ...baseGlobal_tts_config(),
          tab_id: "text",
        },
      ],
      configs_type: "text", // 按钮切换   默认为text    音频为audio
    },
    // 全局标题
    global_text_config: {
      type: 0,
      configs: [
        [
          {
            ...baseText_config(),
          },
        ],
      ],
    },
  });
};
